<!-- 时间日期插件::自定义双面板  -->
<!-- 
    <myDateTime 
        today //限制从当前时刻往后
        :both=true //both===false 时 @change正常返回=> [startTime,endTime], 反之 只有双面板均选择时 返回=> [startTime,endTime], 空时返回=>""
        size='small' // 提供 size => small(默认) 和 medium
        :bind='myThis' //面板绑定的对象 可以通过 myThis.myDateTime2 = "" || [startTime,endTime] 动态给 双面板赋值
        @change='console' // 面板时间选中时 触发的事件 (value) => value = ""||[startTime,endTime]
        style="width:400px;"> //支持自定义 插件宽度和其他样式
    </myDateTime> 
-->
<template>
    <div style="display: inline-block;">
        <div id="myDateTime" :style='{ height: size==="medium" ? "38px" : "30px" }'>
            <el-date-picker
                popper-class='startTime'
                :picker-options="startTime"
                :size='size||"mini"'
                align=center
                v-model="start"
                :readonly=' typeof readonly2 === "boolean" ? readonly : readonly2 === "left" '
                :disabled=' typeof disabled2=== "boolean" ? disabled : disabled2 === "left" '
                type="datetime"
                change='console'
                placeholder="开始日期">
            </el-date-picker>
            
            <span>至</span>
            
            <el-date-picker
                popper-class='endTime'
                :picker-options="endTime"
                :size='size||"mini"'
                prefix-icon='el-icon'
                adefault-value='new Date()'
                v-model="end"
                :readonly=' typeof readonly2 === "boolean" ? readonly : readonly2 === "right" '
                :disabled=' typeof disabled2 === "boolean" ? disabled : disabled2 === "right" '
                type="datetime"
                placeholder="结束日期">
            </el-date-picker>
        </div>
    </div>
</template>
<script>
    var _,fromToday,both,bind;
    export default {
        ref: false,
        global: false,
        name: 'myDateTime',
        props: [ 'readonly','disabled','size','today','both','bind','dad','son','dadSon' ],
        data () {
            return {
                startTime: {
                    disabledDate(time) {
                        const end = _.mayEnd;
                        if(!end) return !fromToday ? false : time.getTime() < Date.now() - 8.64e7;
                        time = time.getTime();
                        // console.log(time > end.getTime(),time >  Date.now() - 8.64e7);
                        return  !fromToday 
                                ? time > end.getTime() // - 8.64e7;//判断是否小于之前归还日期
                                : !( !( time > end.getTime() ) &&  !( time <  Date.now() - 8.64e7 ) );
                    },
                },
                endTime: {
                    disabledDate(time) {
                        const start = _.mayStart;
                        // console.log(start);
                        if(!start) return !fromToday ? false : time.getTime() < Date.now() - 8.64e7;
                        time = time.getTime();
                        return  !fromToday
                                ? time < start.getTime() //+ 8.64e7;//判断是否小于之前归还日期
                                : !( !( time <  Date.now() - 8.64e7 ) && !( time < start.getTime() ) );
                    }
                },
                start: '',
                end: '',

                readonly2: false,
                disabled2: false,
            }
        },
        watch: {
            start(val) {
                if( this.readonly2||this.disabled2 ) return;
                if (this.init) return this.init--;

                if(val) {
                    var aEnd = this.end;
                    const endDate = new Date(aEnd).getTime()||0;
                    const startDate = new Date(val).getTime()||0;
                    endDate<=startDate && ( aEnd = this.end =  '' );
                };

                const res = [ Time(val,'auto'), Time(aEnd,'auto') ];
                if(both===false) this.$emit( 'change',res );
                else this.$emit( 'change',res.includes('') ? '' : res );

                const end = $('body > .endTime');
                end.find('.el-icon-arrow-left').click();
                end.find('.el-icon-arrow-right').click();
                if (!val) return this.mayStart = '';
                const newVal = new Date( val );
                newVal.setDate( val.getDate() + 1 );
                newVal.setHours(0, 0, 0, 0);
                this.mayStart = newVal;
            },
            end(val) {
                if( this.readonly2||this.disabled2 ) return;
                if (this.init) return this.init--;

                if(val) {
                    var aStart = this.start;
                    const startDate = new Date(aStart).getTime()||0;
                    const endDate = new Date(val).getTime()||0;
                    endDate<=startDate && ( aStart = this.start =  '' );
                };

                const res = [ Time(aStart,'auto'), Time(val,'auto') ];
                if(both===false) this.$emit( 'change',res );
                else this.$emit( 'change',res.includes('') ? '' : res );

                const start = $('body > .startTime');
                start.find('.el-icon-arrow-left').click();
                start.find('.el-icon-arrow-right').click();
                if (!val) return this.mayEnd = '';
                const newVal = new Date( val );
                newVal.setDate( val.getDate() - 1 );
                newVal.setHours(0, 0, 0, 0);
                this.mayEnd = newVal;
            },
        },
        created() {
            this.parseDadSon('myDateTime');

            _ = this;
            const readonly = this.readonly;
            this.readonly2 = readonly === '' || readonly === true ? true : readonly === false || readonly === undefined ? false : readonly;
            const disabled = this.disabled;
            this.disabled2 = disabled === '' || disabled === true ? true : disabled === false || disabled === undefined ? false : disabled;

            fromToday = this.today !== undefined;
            both = this.both!==false;
            bind = this.bind;
            // console.log(bind);
            if(bind) {
                bind.myBind('myDateTime2',val=>{
                    if(val==='') return (this.start = this.end = '');
                    this.init = 2;
                    this.start = new Date(val[0]);
                    this.end = new Date(val[1]);
                });
                // (bind = bind.myDateTime2) && ( this.init = 2, this.start = new Date(bind[0]),this.end = new Date(bind[1]) );
            };
        },
        mounted() {
          
        },
        methods: {
          
        },
        destroyed() {
          
        }
    }
</script>
<style>
    #myDateTime {
        font-size: 12px;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        background: white;
        /*height: 32px;*/
        display: flex;
        align-items: center;
    }

    #myDateTime .el-input__inner {
        border: none;
        text-align: center;
    }
</style>